<template>
  <div class="fly-panel" style="margin-bottom: 0">
    <div class="fly-panel-title fly-filter">
      <a
        :class="{ 'layui-this': (status === '') & (tag === '') }"
        @click.prevent="search()"
        >综合</a
      >
      <span class="fly-mid"></span>
      <a :class="{ 'layui-this': status === '0' }" @click.prevent="search(0)"
        >未结</a
      >
      <span class="fly-mid"></span>
      <a :class="{ 'layui-this': status === '1' }" @click.prevent="search(1)"
        >已结</a
      >
      <span class="fly-mid"></span>
      <a :class="{ 'layui-this': tag === '精华' }" @click.prevent="search(2)"
        >精华</a
      >
      <span class="fly-filter-right layui-hide-xs">
        <a
          :class="{ 'layui-this': sort === 'created' }"
          @click.prevent="search(3)"
          >按最新</a
        >
        <span class="fly-mid"></span>
        <a :class="{ 'layui-this': sort === 'hot' }" @click.prevent="search(4)"
          >按热议</a
        >
      </span>
    </div>

    <list-item :lists="lists" @nextPage="nextPage" :isEnd="isEnd"></list-item>
  </div>
</template>

<script>
import listItem from './listItem.vue'
import { getList } from '@/api/comtent'
// import { list } from '@/mock/index'
export default {
  name: 'list',
  data () {
    return {
      status: '',
      tag: '',
      sort: 'created',
      page: 0,
      limit: 20,
      catalog: '',
      lists: [],
      isEnd: false,
      isReapt: false, // 重复请求
      current: '' // 当前状态是哪个
    }
  },
  components: {
    listItem
  },
  created () {
    let catalog = this.$route.params['catalog']
    if (typeof catalog !== 'undefined' && catalog !== '') {
      this.catalog = catalog
    }
    this._getLists()
  },
  watch: {
    current (newVal, oldVal) {
      this.page = 0
      this.lists = [] // 有数据库数据时，在打开
      this.isEnd = false
      this._getLists()
    },
    // '$route' (newVal, oldVal) {
    //   console.log('route:newVal' + newVal)
    //   console.log('route:oldVal' + oldVal)
    // },
    $route: {
      handler: function (newVal, oldVal) {
        console.log('route:newVal' + newVal)
        console.log('route:oldVal' + oldVal)
      }
    }
  },
  methods: {
    search (value) {
      if (typeof value === 'undefined' && this.current === '') {
        return
      }
      this.current = value
      switch (value) {
        // 未结
        case 0:
          this.status = '0'
          this.tag = ''
          break
        // 已结
        case 1:
          this.status = '1'
          this.tag = ''
          break
        // 精华
        case 2:
          this.status = ''
          this.tag = '精华'
          break
        // 最新排序
        case 3:
          this.sort = 'created'
          break
        // 热议排序
        case 4:
          this.sort = 'hot'
          break
        // 默认综合
        default:
          this.status = ''
          this.tag = ''
          this.current = ''
          break
      }
    },
    _getLists () {
      // 多次点击，请求完之后再请求
      if (this.isReapt) return
      if (this.isEnd) return
      this.isReapt = true
      let options = {
        catalog: this.catalog,
        isTop: 0,
        page: this.page,
        limit: this.limit,
        sort: this.sort,
        tag: this.tag,
        status: this.status
      }
      getList(options).then((res) => {
        if (res.code === 200) {
          this.isReapt = false
          // 判断是否为最后一条，是则改为true
          if (res.data.length < this.limit) {
            this.isEnd = true
          }
          // 判断lists的长度是否为0，如果为0，则直接赋值
          // 不为0，则需要拼接
          if (this.lists.length === 0) {
            this.lists = res.data
          } else {
            this.lists = this.lists.concat(res.data)
          }
        }
      }).catch((err) => {
        this.isReapt = false
        this.$alert(err || '请求错误')
      })
    },
    nextPage () {
      this.page++
      this._getLists()
    }
  },
  filters: {
    filterStatus (status) {
      if (status === '1') {
        return '已结'
      }
      if (status === '2') {
        return '精华'
      }
    }
  }
}
</script>
